import QtQuick 2.0

Rectangle {
    id: slider
    width: 7
    height: 100

    property int max_value: 100
    property int slider_value: slider_handler_mouse_area.value * max_value
    property color color: "#0066cc"

    Rectangle {
        width: slider.width
        anchors.bottom: slider.bottom
        anchors.top: slider_handle.verticalCenter
        color: slider.color
        radius: 3
        border.width: 1
        border.color: Qt.darker(color, 1.3)
        opacity: 0.8
    }

    MouseArea {
        id: slider_mouse_area
        anchors.fill: slider
        hoverEnabled: true
        onEntered: slider_handle.visible = true
        onExited: {slider_handle.visible = false; slider.visible = false}
        onClicked: {
            slider_handle.y = mouseY - (slider_handle.width / 2) - 3
            console.log(slider_handle.y)
        }
    }

    Image {
        id: slider_handle
        visible: false
        source: "../images/slider_handle.png"
        anchors.horizontalCenter: parent.horizontalCenter
        MouseArea {
            id: slider_handler_mouse_area
            anchors.fill: slider_handle
            anchors.margins: -4
            drag.target: parent
            drag.axis: Drag.YAxis
            drag.minimumY: Math.round(-slider_handle.width / 2 + 3)
            drag.maximumY: Math.round(slider.height - slider_handle.width / 2 - 3)
            property real value: (drag.maximumY - slider_handle.y) / (drag.maximumY - drag.minimumY)
        }
    }
}
